<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Everyday,Question</title>
    <script src="/js/vue.js"></script>
    <script src="/js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" @click="randomQuestion()" value="每日一题"/>
        <h1>{{question.name}}</h1>
        <h1>{{question.level}}</h1>
        <h1>{{question.description}}</h1>
        <h1>{{question.answer}}</h1>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            question: {
                id: '',
                name: '',
                level: 0,
                description: '',
                answer: ''
            }
        },
        mounted(){
            axios.get('/question/randQuestion').then(res=>{
                if (res.data.flag) {
                    this.question = res.data.data;
                    console.log(this.question);
                }
            })
        },
        methods: {
            randomQuestion() {
                axios.get('/question/randQuestion').then(res=>{
                    if (res.data.flag) {
                        this.question = res.data.data;
                        console.log(this.question);
                    }
                })
            }
        }
    });
</script>
</html>